<template>
  <div>
    <!-- 头部 -->
    <heads></heads>
    <!-- 头部  end-->

    <!-- 按钮 -->
    <div class="sale-btn">
      <div class="warp">
        <div class="touris-down">
          <!-- 全部 -->
          <div>
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">报备方式</div>
              <div class="sale-list-li-input">
                <select v-model="optionsValue" placeholder="请选择" style="width: 100%;height: 27px;">
                  <option
                    v-for="item in options"
                    :key="item.optionsValue"
                    :label="item.label"
                    style="width: 100%"
                    :value="item.optionsValue">
                  </option>
                </select>
              </div>
            </div>
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">报备日期</div>
              <div class="sale-list-li-input">
                <div class="block">
                  <el-date-picker
                    v-model="formData.create_time_s"
                    type="date"
                    style="width: 100%;"
                    placeholder="开始日期">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">------</div>
              <div class="sale-list-li-input">
                <div class="block">
                  <el-date-picker
                    v-model="formData.create_time_e"
                    type="date"
                    style="width: 100%"
                    placeholder="结束日期">
                  </el-date-picker>
                </div>
              </div>
            </div>
            <!-- 状态 -->
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">部门</div>
              <div class="sale-list-li-input">
                <select @change="getMenD" v-model="formData.department_id" placeholder="请选择" style="width:90%;height: 27px;">
                  <option
                    v-for="item in buMeData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <!-- 状态 emd-->

            <!-- 公私客 -->
            <!-- 门店 -->
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">门店</div>
              <div class="sale-list-li-input">
                <select @change="getXiaoZ" v-model="formData.store_id" placeholder="请选择" style="width:90%;height: 27px;">
                  <option
                    v-for="item in menDianData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <!-- 小组 -->
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">小组</div>
              <div class="sale-list-li-input">
                <select @change="getJJR" v-model="formData.group_id" placeholder="请选择" style="width:90%;height: 27px;">
                  <option
                    v-for="item in xiaoZuData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
          </div>
          <!-- 经纪人 -->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">经纪人</div>
            <div class="sale-list-li-input">
              <select v-model="formData.user_id" placeholder="请选择" style="width:100%;height: 27px;">
                <option
                  v-for="item in jjrData"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <!-- 全部 emd-->

          <!-- 求租 -->
          <div class="sale-list-li sale-list-lit">
            <div class="sale-list-li-left sale-list-li-leftt">楼盘</div>
            <div class="sale-list-li-input">
              <select @change="getQuData" v-model="formData.premises" placeholder="请选择" style="width:100%;height: 27px;">
                <option
                  v-for="item in louData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id">
                </option>
              </select>
            </div>
          </div>
          <!-- 求租 emd-->

          <div v-if="optionsValue === 2">
            <!--小区-->
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">分区</div>
              <div class="sale-list-li-input">
                <select @change="getDongData" v-model="formData.premisespartition_id" placeholder="请选择" style="width:100%;height: 27px;">
                  <option
                    v-for="item in quData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <!--小区-->
            <!--楼栋-->
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">楼栋</div>
              <div class="sale-list-li-input">
                <select @change="getYuanData" v-model="formData.premisesbuilding_id" placeholder="请选择" style="width:90%;height: 27px;">
                  <option
                    v-for="item in dongData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <!--楼栋-->
            <!--单元-->
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">单元</div>
              <div class="sale-list-li-input">
                <select @change="getLCData" v-model="formData.premisesunit_id" placeholder="请选择" style="width:90%;height: 27px;">
                  <option
                    v-for="item in yuanData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <!--单元-->

            <!--楼层-->
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">楼层</div>
              <div class="sale-list-li-input">
                <select @change="getFangData" v-model="formData.premisesfloor_id" placeholder="请选择" style="width:90%;height: 27px;">
                  <option
                    v-for="item in lcData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
            <div class="sale-list-li sale-list-lit">
              <div class="sale-list-li-left sale-list-li-leftt">房间</div>
              <div class="sale-list-li-input">
                <select v-model="formData.premisesroom_id" placeholder="请选择" style="width:100%;height: 27px;">
                  <option
                    v-for="item in fangData"
                    :key="item.id"
                    :label="item.title"
                    :value="item.id">
                  </option>
                </select>
              </div>
            </div>
          </div>


          <div class="">
            <!--楼层-->
            <button class="" @click="">重置</button>
            <button class="" @click="SetHourList(1)">查询带看</button>
            <button class="" @click="">查询成交报告</button>
          </div>
          <!-- 公私客 end-->
        </div>
      </div>
    </div>
    <!-- 按钮end -->


    <!-- 客源列表 -->
    <div class="sale-info">
      <table>
        <!-- 标题 end-->
        <tr class="sale-info-title-up right_up">
          <!--<td>全部</td>-->
          <td>编号</td>
          <td>报备日期</td>
          <td>计划带看时间</td>
          <td>客户姓名</td>
          <td>客户电话</td>
          <td>报备楼盘</td>
          <td  v-if="louPanFang === 2">报备房源</td>
          <td>区域</td>
          <td>门店</td>
          <td>小组</td>
          <td>经纪人</td>
          <td>确认单上传状态</td>
          <td>成交报告</td>
        </tr>
        <!-- 标题 end-->

        <!-- 列表循环 -->
        <tr class="sale-info-title" v-for="item in baoBeiList.data">
          <!--<td>全部</td>-->
          <td>{{item.id}}</td>
          <td>{{item.create_time}}</td>
          <td>{{item.see_time}}</td>
          <td>{{item.tourists_name}}</td>
          <td>{{item.tourists_phone}}</td>
          <td>{{item.premisesdata}}</td>
          <td  v-if="louPanFang === 2">
            {{item.premisesPartition}}/{{item.premisesBuilding}}/{{item.premisesUnit}}/{{item.premisesFloor}}/{{item.premisesRoom}}
          </td>
          <td>{{item.department}}</td>
          <td>{{item.departmentStore}}</td>
          <td>{{item.departmentGroup}}</td>
          <td>{{item.user}}</td>
          <td>
            <el-button v-if="item.is_see_img === 2" style=" color: #fff;background-color: #409EFF;">已上传确认单</el-button>
            <el-button v-else @click="submitImg(item.id)" style="color: #fff;background-color: #409EFF;">未上传(点击上传确认单)</el-button>
            <el-button v-if="item.is_see_img === 2" @click="background(item.id)" style="color: #fff;background-color: #409EFF;">编辑</el-button>
            <el-button v-if="item.is_see_img === 2" @click="lookBao(item.id)" style="color: #fff;background-color: #409EFF;">查看</el-button>


          </td>
          <td>
            <el-button v-if="item.is_deal === 2" style=" color: #fff;background-color: #409EFF;">已上传成交报告</el-button>
            <el-button v-if="item.is_deal === 1" style="background-color: #409EFF; color: #fff;" @click="Transaction(item.id)">未上传(点击上传成交报告)</el-button>
            <el-button v-if="item.is_deal === 2" @click="lookReport(item.id)" style="color: #fff;background-color: #409EFF;">编辑</el-button>
            <el-button v-if="item.is_deal === 2" style="background-color: #409EFF; color: #fff;" @click="ReportView(item.id)">查看</el-button>

          </td>
        </tr>
        <!-- 列表循环 end-->
      </table>
      <!-- 分页 -->
      <div class="page-list">
        <el-pagination
          layout="prev, pager, next"
          :total="baoBeiList.total"
          :current-page="baoBeiList.current_page"
          @current-change="SetHourList"
          :page-size="baoBeiList.per_page">

        </el-pagination>
      </div>
      <!-- 分页 end-->

      <!--上传确认单弹窗-->
      <div v-if="showImg === 2">
        <div class="modal">
          <div class="modal-bg"  @click="closeImg"></div>
          <div class="rele">
            <!--<div class="rele-title">确认单上传<span @click="closeImg">X</span></div>-->
            <div class="rele-titles" id="rele-titles"><img @click="closeImg" src="../assets/img/tub.png" alt="">确认单上传</div>
            <div class="img_content">
              <el-upload
                class="avatar-uploader"
                action="http://kf.wuyoufang.cn/newapi/Upload/uploadimg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-button @click="baoSubmit" type="primary" style="color: #fff; margin-top: 10px;">保存</el-button>
            </div>
          </div>
        </div>
      </div>

      <!--编辑单弹窗-->
      <div
        v-if="showBox === 2">
        <div class="modal">
          <div class="modal-bg"  @click="closeEdit"></div>
          <div class="rele">
            <!--<div class="rele-title">确认单上传<span @click="closeBox">X</span></div>-->
            <div class="rele-titles" id="rele-titles"><img @click="closeEdit" src="../assets/img/tub.png" alt="">编辑单上传</div>
            <div class="img_content">
              <el-upload
                class="avatar-uploader"
                action="http://kf.wuyoufang.cn/newapi/Upload/uploadimg"
                :show-file-list="false"
                :on-success="handleAvatarSuccess">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
              <el-button @click="baoSubmit" type="primary" style="color: #fff; margin-top: 10px;">保存</el-button>
            </div>
          </div>
        </div>
      </div>

      <!--查看带看确认单-->
      <div v-if="lookImg === 2">
        <div class="modal">
          <div class="modal-bg"  @click="closeLookImg"></div>
          <div class="rele">
            <!--<div class="rele-title">确认单查看<span @click="closeLookImg">X</span></div>-->
            <div class="rele-titles" id="rele-titles"><img @click="closeLookImg"src="../assets/img/tub.png" alt="">确认单查看</div>
            <div class="look_img">
              <img :src="lookImgUrl" alt="">
              <div class="book_box">上传时间:&nbsp;&nbsp;&nbsp;<span>{{imgTime}}</span></div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 客源列表 end-->

    <!-- 尾部 -->
    <footers></footers>
    <!-- 尾部 end -->

    <!-- 客源录入 弹窗-->
    <!--<div v-show="Tourshow">-->
    <!--<Tourmodal :TourClose="tour"></Tourmodal>-->
    <!--</div>-->
    <!-- 客源录入 弹窗  end-->
    <!--提示弹框-->
    <div v-show="submitShow">
      <Modal :ModalClose="Closesubmit" :message="message" :pushTo="pushTo"></Modal>
    </div>
    <!--成交报告-->
    <div v-show="Transactionshow">
      <Transaction :optionsValue="optionsValue" :SetHourList="SetHourList" :LDmodal="opensunmit" :MethodTran="MethodTran" ref="Trans"></Transaction>
    </div>
    <!--成交报告-->
    <!--报表编辑-->
    <div v-show="lookReportshow">
      <lookReport :optionsValue="optionsValue"  :knockdownDatas="knockdownData" :SetHourList="SetHourList" :LDmodal="opensunmit" :closeTran="closeTran" ref="Transbox"></lookReport>
    </div>
    <!--报表编辑-->
    <!--报表查看-->
    <div v-show="ReportViewshow">
      <ReportView :optionsValue="optionsValue"  :knockdownDatas="knockdownData" :SetHourList="SetHourList" :LDmodal="opensunmit" :buteneTran="buteneTran" ref="TransLook"></ReportView>
    </div>
    <!--报表查看-->
  </div>
</template>
<script type="text/babel">
  import heads from './head';
  import footers from './footer';
  import Tourmodal from './tour-modal';
  import Modal from './modal.vue';
  import Transaction from  './Transaction';
  import ReportView from  './ReportView';
  import lookReport from  './lookReport'
  export default {
    name: 'TouristsList',
    components: {
      heads,
      footers,
      Tourmodal,
      Modal,
      Transaction,
      ReportView,
      lookReport
    },
    data() {
      return {
        //楼盘or房源
        louPanFang:1,
        message:'',
        pushTo:'',
        imageUrl: '',
        imgTime:'',
        imageUrl2: '',
        lookImgUrl:'',
        submitShow:false,
        Transactionshow:false,
        ReportViewshow:false,
        lookReportshow:false,
        showImg:1,
        lookImg:1,
        showBox:1,
        baobeiID:0,
        formData: {
          page: 1
        },
        test: [],
        // 报备方式
        optionsValue: 1,

        options: [
          {
            optionsValue: 1,
            label: '楼盘报备'
          }, {
            optionsValue: 2,
            label: '房源报备'
          }],
        //楼盘下拉
        louData: [],
        quData: [],
        dongData: [],
        yuanData: [],
        lcData: [],
        fangData: [],
        //部门.小组等
        buMeData: [],
        menDianData: [],
        xiaoZuData: [],
        jjrData: [],
        // 列表数据
        baoBeiList: {},

        //获取提交报告数据
        knockdownData:{}
      };

    },
    methods: {
      // 点击查看报备单
      lookBao(id){
        let that = this;
        // that.baobeiID = id;
        if (that.louPanFang === 1){
          that.$http.get('/newapi/Touristslook/pdetail',{
            params:{
              id:id
            }
          }).then(res=>{

            that.lookImg = 2;
            that.lookImgUrl = res.data.res.see_img;
            that.imgTime = res.data.res.see_img_time
          }).catch(error=>{
            console.log(error)
          })
        }else {
          that.$http.get('/newapi/Touristslook/hdetail',{
            params:{
              id:id
            }
          }).then(res=>{
            // console.log(res);
            that.lookImg = 2;
            that.lookImgUrl = res.data.res.see_img;
            that.imgTime = res.data.res.see_img_time
          }).catch(error=>{
            console.log(error)
          })
        }

      },

      //点击成交报告查看

      //编辑成交报表

      //客户成交
      Transaction(id){

      },
      //查看报告
      ReportView(id){

      },

      // 打开提示弹窗
      opensunmit() {
        this.message = this.$store.state.messageString;
        this.submitShow = true
      },
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false
      },
      baoSubmit(){
        let that = this;
        if (that.louPanFang === 1){
          that.$http.get('/newapi/Touristslook/padd',{
            params:{
              id:that.baobeiID,
              see_img:that.imageUrl2
            }
          }).then(res=>{
            if (res.data.status === 200){
              that.closeImg();
              that.imageUrl = '';
              that.imageUrl2='';
              that.$store.state.messageString = res.data.message;
              that.opensunmit();
              that.SetHourList();
            }else {
              that.$store.state.messageString = res.data.message;
              that.opensunmit();
            }
          }).catch(error=>{
            console.log(error)
          })
        }else {
          that.$http.get('/newapi/Touristslook/hadd',{
            params:{
              id:that.baobeiID,
              see_img:that.imageUrl2
            }
          }).then(res=>{
            if (res.data.status === 200){
              that.closeImg();
              that.imageUrl = '';
              that.imageUrl2='';
              that.$store.state.messageString = res.data.message;
              that.opensunmit();
              that.SetHourList();
            }else {
              that.$store.state.messageString = res.data.message;
              that.opensunmit();
            }
          }).catch(error=>{
            console.log(error)
          })
        }

      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
        console.log(res);
        this.imageUrl2=res.res;
      },
      //上传确认单弹窗
      submitImg(id){
        this.showImg =2;
        this.baobeiID = id;
      },
      // 编辑
      background(id){
        this.showBox=2;
        this.baobeiID = id
      },
//      成交报告
      Transaction:function(id){
        this.$store.state.areaId = id;
        this.$refs.Trans.prenFunc();
        this.Transactionshow = true;
      },
      MethodTran(){
        this.Transactionshow = false;
      },
//    报表查看
      ReportView:function(id){
        this.$store.state.areaId = id;
        this.$refs.TransLook.prenFunc();
        this.ReportViewshow = true;
        this.lookReport(id,"view");
      },
      buteneTran(){

        this.ReportViewshow = false;
      },
//      编辑报表
      lookReport:function(id,str){

        this.$store.state.areaId = id;
        if(str === undefined){
          this.lookReportshow = true;
        }
        this.$refs.Transbox.prenFunc();
        this.$http.get('/newapi/deal/getDetail',{
          params:{
            "deal_id":id
          }
        }).then(({data})=>{

          this.knockdownData = data.res;

        });

      },
      closeTran(){
        this.lookReportshow = false;
      },

//关闭
      closeImg(){
        this.showImg = 1;
      },
      //关闭
      closeEdit(){
        this.showBox = '';
  },
      closeLookImg(){
        this.lookImg = 1;
      },
      //获取列表
      SetHourList(page) {
        let that = this;
        that.louPanFang = that.optionsValue;
        that.formData.page = page;
        if (that.optionsValue === 1) {
          that.$http.get('/newapi/Touristspreparation/listpremises', {
            params: that.formData
          }).then(function(res) {
            that.baoBeiList = res.data;


          }).catch(function(err) {
            console.log(err);
          });
        } else {
          that.$http.get('/newapi/Touristspreparation/listhouse', {
            params: that.formData
          }).then(function(res) {
            that.baoBeiList = res.data;


          }).catch(function(err) {
            console.log(err);
          });
        }
      },
      //获取分区
      getQuData() {
        let that = this;
        that.$http.get('/newapi/Premisespartition/getdong', {
          params: {
            premises_id: that.formData.premises
          }
        }).then(function(res) {


          that.quData = res.data.res;
        }).catch(function(err) {
          console.log(err);
        });
      },
      //获取楼栋
      getDongData() {
        let that = this;
        that.$http.get('/newapi/Premisesbuilding/getdong', {
          params: {
            premisespartition_id: that.formData.premisespartition_id
          }
        }).then(res => {
          that.dongData = res.data.res;
        });
      },
      //获取单元
      getYuanData() {
        let that = this;
        that.$http.get('/newapi/Premisesunit/getdanyuan', {
          params: {
            premisesbuilding_id: that.formData.premisesbuilding_id
          }
        }).then(res => {
          that.yuanData = res.data.res;
        }).catch(err => {
          console.log(err);
        });
      },
      //获取楼层
      getLCData() {
        let that = this;
        that.$http.get('/newapi/Premisesfloor/getlouceng', {
          params: {
            premisesunit_id: that.formData.premisesunit_id
          }
        }).then(res => {
          that.lcData = res.data.res;
        }).catch(error => {
          console.log(error);
        });
      },
      //获取房间
      getFangData() {
        let that = this;
        that.$http.get('/newapi/Premisesroom/getfangjian', {
          params: {
            premisesfloor_id: that.formData.premisesfloor_id
          }
        }).then(res => {
          that.fangData = res.data.res;
        }).catch(error => {
          console.log(error);
        });
      },
      //获取门店
      getMenD() {
        let that = this;
        that.$http.get('/index/department', {
          params: {
            id: that.formData.department_id
          }
        }).then(res => {
          that.menDianData = res.data;
        }).catch(error => {
          console.log(error);
        });
      },
      //获取小组
      getXiaoZ() {
        let that = this;
        that.$http.get('/index/department', {
          params: {
            id: that.formData.store_id
          }
        }).then(res => {
          that.xiaoZuData = res.data;
        }).catch(error => {
          console.log(error);
        });
      },
      //获取经纪人
      getJJR() {
        let that = this;
        that.$http.get('/index/department/staff_group/' + that.formData.group_id).then(res => {
          that.jjrData = res.data;
        }).catch(error => {
          console.log(error);
        });
      },
      // 打开提示弹窗
      opensunmit() {
        this.message = this.$store.state.messageString;
        this.submitShow = true;
      },
      //关闭弹窗
      Closesubmit() {
        this.message = '';
        this.pushTo = '';
        this.submitShow = false;
      },
    },
    mounted: function() {
      let that = this;
      that.SetHourList();
      // 设置楼盘下拉列表
      that.$http.get('/index/premises/all').then(res => {
        that.louData = res.data;
      }).catch(err => {
        console.log(err);
      });
      //设置部门下拉列表
      that.$http.get('/index/department').then(res => {


        that.buMeData = res.data;
      }).catch(error => {
        console.log(error);
      });

    }
  };
</script>

<style scoped>
  .look_img{
    width: 300px;
    height: 200px;
    margin-top: 40px;
  }
  .look_img img{
    height: 100%;
    width: 100%;
    margin-left:25px;
    top: 20px;
  }
  .img_content{
    padding: 70px 10px 20px 10px;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .rele{
    width: 26%;
    height: 360px;
    border-radius: 5px;
    overflow: hidden;
    background: #fff;
    position:absolute;
    top: 50%;
    margin-top: -180px;
    left: 37%;
    z-index: 10;
  }


  img{
    /*position: fixed;*/
    flex-star:40px;
    /*margin-left: 44%;*/
    position: relative;

  }
  .rele-titles img{
    left: 88%;
    cursor: pointer;

  }
  .rele-titles {
    width: 14.8%;
    padding: 0 1%;
    line-height: 50px;
    font-size: 2em;
    color: #000;
    background: #f5f5f7;
    position: fixed;
    z-index: 9;
    border-bottom: 1px solid #d3d3d3;
    padding-right: 200px;
  }
  .touris-down {
    width: 100%;
    float: left;
  }

  .sale-list-li-leftt {
    margin-top: 6px !important;
    font-weight:bold
  }

  .sale-list-lit {
    margin-top: 0 !important;
  }

  .sale-info {
    width: 100%;
    float: left;
    position: fixed;
    top: 216px;
    height: calc(100% - 256px);
    overflow-y: auto;
  }

  table {
    width: 100%;
  }

  table td {
    line-height: 30px;
    height: 30px;
    border: 1px solid #d3d3d3;

  }

  .sale-list-li-inputz input {
    width: 40% !important;
    float: left;

  }

  .sale-list-li-inputz input:nth-child(2) {
    margin-left: 8%;

  }

  .sale-list-li-left {
    width: 30%;
    float: left;
    line-height: 30px;
    text-align: center;

  }

  .page-list {
    width: 100%;
    float: left;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 70px;

  }

  .sale-list-li {
    width: 100%;
    float: left;
    margin-top: 10px;

  }

  .sale-list-li-input {
    width: 70%;
    float: left;

  }

  tr:nth-child(n+2):hover{
    background: #f9f9f9;
  }


  .sale-info-title {
    background-color: #f9f9f9;
    width: 100%;
    overflow: hidden;

  }
  .sale-info-title-up{
    color: #fff;
  }
  .right_up{
    background-color: #1590ed;
    font-weight:bold;
  }

  .sale-list-li-input input {
    width: 90%;
    float: left;
    /* height: 30px; */
    line-height: 30px;
    border-radius: 5px;
    background: #fff;
    border: 1px solid #d3d3d3;
  }

  .sale-btn {
    width: 100%;
    position: fixed;
    top: 80px;
    float: left;
    background-color: #ecedee;
    border-bottom: 1px solid #d3d3d3;
    line-height: 40px;
    height: 126px;
  }

  .sale-btn button {
    font-size: 1.1em;
    padding: 5px 10px;
    border-radius: 5px;
    background: #415dba;
    color: #fff;
    margin-left: 30px;
    border: none;
    cursor: pointer;
  }
  .sale-list-li {
    width: 15.666666667%;
    float: left;
  }
  .book_box{
    margin-top: 20px;
  }

  #rele-titles{
    width: 100%;
    position: relative;
  }
  select{
    cursor: pointer;
  }
  .modal-bg{
    height: 161%;
  }
</style>
